<template>
    <!-- 随堂练习实验批阅 -->
    <div id="marking-test" v-if="resData" >
        <!-- 调整相似度-查重设置弹出框 -->
        <el-dialog :close-on-click-modal="false" class="dialog-check" title="查重设置" :visible.sync="dialogCheck" width="30%">
        <p class="check-tishi">
            <i class="el-icon-warning"></i>批量控制所有学生提交的实验报告重复率检查比率
        </p>
        <p class="dialog-b">实验报告代码查重校验
            <el-switch v-model="dialogCheckSwitch"></el-switch>
        </p>
        <!-- 关闭相似度不显示 -->
        <p v-if="dialogCheckSwitch">实验报告相似度高于
            <el-select class="dialog-check-value" v-model.number="resData.reportDuplicatePercent" placeholder="请选择">
            <el-option v-for="item in optionsRepeat" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
            </el-select>
            <!-- <el-input @keyup.native="provingCount(resData,'reportDuplicatePercent')" class="dialog-check-value" v-model.number="resData.reportDuplicatePercent"></el-input> -->
        </p>
        <span slot="footer" class="dialog-footer">
            <el-button class="button-style" @click="sameSubmit">保存</el-button>
            <br>
            <br>
        </span>
        </el-dialog>
        <div class="preview-top">
        <div class="preview-top1">
            <div class="preview-top-content">
            <div v-if="resData">
                <span class="preview-title">{{ resData.courseName }}</span>
                <span class="preview-line">/</span>
                <span>{{ resData.chapterName }}</span>
                <span>姓名：{{ resData.userName }}</span>
                <span>学号：{{ resData.userNumber }}</span>
            </div>
            </div>
        </div>
        <div class="preview-top2 jx-content">
            <div class="preview-top-content clearfix">
            <div class="fl">
                <span class="fs18">作业评分：
                <!-- <el-input @keyup.native="provingCount(resData,'score')" v-model.number="resData.score" class="preview-score"></el-input> -->
                <span v-if="resData.score == 0">0</span>
                <span  v-else class="preview-score">{{resData.score}} </span>
                分</span> &nbsp;
            </div>
            <div class="fr">
                <!-- <div @click="submitMarking" class="button-style">提交</div> -->
                <!-- <div class="download-pdf" @click="downPdf" v-show="pdfStatus"><img src="./../../../assets/images/icon_pdf.png"  /></div> -->
                <div @click="postPdf" class="button-style">提交</div>
                <el-button :disabled="!resData.preview" @click="getPaper(resData.preview)" class="button-style">上一份</el-button>
                <el-button :disabled="!resData.next" @click="getPaper(resData.next)" class="button-style">下一份</el-button>
            </div>
            </div>
        </div>
        </div>
        <div class="jx-content preview-content" id="pdfDom" v-if="resData">
        <div class="marking-test-title c-blue">在线版实验报告</div>
        <div v-if="resData.reportContents">
            <div class="ex-answer markdown-body" v-html="resData.reportContents"></div>
        </div>
        <div v-else class="nodata-box">暂未提交报告，请查看word版</div>
        <div class="marking-test-title c-blue">word版实验报告</div>
        <div v-if="resData.reportAddress">
                <div class="clearfix">
                <div class="fl">
                    <span class="c-gray">{{resData.reportName}}</span>
                    <a href="javascript:;" class="pdf-hide" @click="downloadModel(resData)">下载</a>
                </div>
                <div class="fr pdf-hide">
                    <div @click="dialogCheck = true;" class="button-style">调整相似度</div>
                </div>
        </div>
        <div v-if="resData.checkReportDuplicate && (resData.resultList !== undefined && resData.resultList.length)" class="same-content" :class="{'same-content-hidden':sameContentShow}">
            <ul v-if="resData.resultList.length">
                <li v-for="(item,index) in resData.resultList" :key="index">
                <span>该学生与{{ item.userName }}同学代码相似度高达</span>
                <div class="progress">
                    <el-progress :percentage="item.percent"></el-progress>
                </div>
                <a href="javascript:;" @click="$downloadfile.download(item.url,item.reportName)">下载{{ item.userName }}实验报告</a>

                <!-- <a :href="item.url">下载与{{ item.userName }}同学相似报告</a> -->
                </li>
            </ul>
                <div v-if="resData.resultList.length > 3" @click="sameContentShow = !sameContentShow" class="show-same-content" :class="{'same-content-hidden-icon':!sameContentShow}">
                    <i class="el-icon-arrow-down"></i>
                </div>
            </div>
        </div>
            <div v-else>暂未提交报告，请查看在线版</div>
            <!-- 二期新增 -->
            <div class="question-assess" style="height: 35px;">
                <span class="title">总分 : </span>
                <div style="width: 94%;display: inline-block;" v-if="inputStatus">
                    <el-input style="width: 56px; margin-right:10px;" @keyup.native="provingCount(resData,'score')" v-model.number="resData.score" class="preview-score" />
                    <span> 分</span>
                </div>
                <div v-else style="width: 94%; display: inline-block; line-height: 1.5;">{{ resData.score }}</div>
            </div>
            <div class="question-assess" style="padding-bottom:50px">
                 <p class="title"  style="line-height:50px">评价 : </p>
                 <div v-if="inputStatus">
                    <div class="question-assess-right" >
                        <div style="margin-top: 20px">
                            <el-radio-group v-model="radio2" size="small"   @change='changelist'>
                            <el-radio-button :label="item.id" v-for="(item ) in list" :key="item.id"   >
                                    {{ item.name }}
                                    <span v-if="item.selected">(默认)</span>
                                </el-radio-button>
                            </el-radio-group>
                            <span  @click="dialogTemplate" class="spans"><i class="iconfont icon-shezhi"></i> 设置</span>
                        </div>
                    </div>
                </div>
                <dialogTemplate ref="dialogTemplate" @changeinit="changeinit"></dialogTemplate>
                <div>
                     <el-input
                        v-if="inputStatus"
                        v-model="assessTextarea"
                        type="textarea"
                        placeholder="请输入评价内容或点击右上角使用模板"
                        maxlength="200"
                        show-word-limit></el-input>
                        <div v-else style="width: 94%; display: inline-block; line-height: 1.5;">{{ assessTextarea }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from "axios";
    import $ from "jquery";
    import html2Canvas from 'html2canvas'
    import dialogTemplate from '@/components/dialogTemplate'
    import JsPDF from 'jspdf'
    //导出word
    import "../../../../static/wordExport/jquery.wordexport";
    import { evaluation} from '@/api/Virtual';
    export default {
        components: {
            dialogTemplate
        },
        data() {
            return {
                optionsRepeat: [
                    {
                        value: 90,
                        label: "90%"
                    },
                    {
                    value: 80,
                    label: "80%"
                    },
                    {
                    value: 70,
                    label: "70%"
                    },
                    {
                    value: 60,
                    label: "60%"
                    },
                    {
                    value: 50,
                    label: "50%"
                    },
                    {
                    value: 40,
                    label: "40%"
                    },
                    {
                    value: 30,
                    label: "30%"
                    },
                    {
                    value: 20,
                    label: "20%"
                    },
                    {
                    value: 10,
                    label: "10%"
                    }
                ],
                //查重设置弹出框
                dialogCheck: false,
                editExperimental: {
                    radio: "1"
                },
                //查重设置开关
                dialogCheckSwitch: false,
                //箭头 展开更多
                sameContentShow: true,
                paramsData: {},
                //班级id
                classId: this.$route.query.id,
                // 课程ID
                courseId: '',
                //章节id
                chapterId: this.$route.query.chapterId,
                //页面带过来的id
                reportId: "",
                //接收的题目列表
                resData: "",
                //发送的数据
                //reqData:'',
                //选择题
                questionList1: null,
                //判断题
                questionList2: null,
                //填空题
                questionList3: null,
                //简答题
                questionList4: null,
                //编程题
                questionList5: null,
                qKey: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
                judgekey: ["错误", "正确"],
                questionNumber: ["一", "二", "三", "四", "五", "六"],
                questionName: [
                    {
                        type: 1,
                        name: "选择题"
                    },
                    {
                        type: 2,
                        name: "判断题"
                    },
                    {
                        type: 3,
                        name: "填空题"
                    },
                    {
                        type: 4,
                        name: "简答题"
                    },
                    {
                        type: 5,
                        name: "编程题"
                    },
                    {
                        type: 6,
                        name: "实验题"
                    }
                ],
                // 二期更改
                assessTextarea: '',
                pdfStatus: false,
                pdfBlob: '',

                inputStatus: true,
                 //yx添加评价模板
                radio2:'',
                list:[],
                flag:''
            };
        },
        created() {
            let self = this
            self.courseId = this.$localstorage.getLocalStorage("setCourseId")
            this.getReportId();
        },
        watch: {
            //监听查重开关
            dialogCheckSwitch(val, o) {
                //如果查重开启
                if (val === true) {
                    console.log(123123);
                }
            }
        },
        computed: {},
        mounted() {
            this.init();
        },
        methods: {
//#region yx-评价模板
            //获取模板内容
            getInit(){

                let type = 3
                evaluation(type).then((res) => {
                    this.list = res.data
                    let n;
                    let idslist=this.list.map(i =>{ return i.id})

                    if(this.radio2  &&　idslist.includes(this.radio2)  && (this.assessTextarea ||　this.assessTextarea != null || this.assessTextarea != undefined) ){
                        if( this.flag ){

                            n = this.list.findIndex(i =>{ return i.id ==  this.radio2})
                            this.assessTextarea = this.list[n].content
                        }
                    }else if(!this.radio2  &&  (this.assessTextarea ||　this.assessTextarea != null || this.assessTextarea != undefined)　){
                         if( this.flag ){

                            n = this.list.findIndex(i =>{ return i.selected == true})
                            this.assessTextarea = this.list[n].content
                        }
                    }else if(!this.radio2  && !this.assessTextarea){

                        n = this.list.findIndex(i =>{ return i.selected == true})
                        this.assessTextarea = this.list[n].content

                    }else if(this.radio2  &&　!idslist.includes(this.radio2) && (this.assessTextarea ||　this.assessTextarea != null || this.assessTextarea != undefined)  ){
                        if( this.flag ){
                            n = this.list.findIndex(i =>{ return i.selected == true})
                            this.assessTextarea = this.list[n].content
                        }

                    }

                })
            },
            dialogTemplate(){
                this.$refs.dialogTemplate.init()
            },
            changelist(con){
                for(let i=0; i<this.list.length; i++){
                    if(this.list[i].id == con ){
                        this.assessTextarea = this.list[i].content
                        break;
                    }
                }

            },

            changeinit(flag){
                if(flag){
                    this.flag = true
                    this.getInit()
                }
            },
//#region yx-评价结束
            toGetPdf(type){
                // type 1. 提交并归档 2. 下载
                let self = this
                // window.scrollTo(0, 0);
                // self.getPdf('#pdfDom',self.resData.courseName)
                var target = document.querySelector('#pdfDom')
                target.style.background = "#FFFFFF";
                setTimeout(() => {
                    html2Canvas(target).then(function (canvas) {
                        var contentWidth = canvas.width;
                        var contentHeight = canvas.height;

                        //一页pdf显示html页面生成的canvas高度;
                        var pageHeight = contentWidth / 592.28 * 841.89;
                        //未生成pdf的html页面高度
                        var leftHeight = contentHeight;
                        //页面偏移
                        var position = 0;
                        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                        var imgWidth = 595.28;
                        var imgHeight = 592.28/contentWidth * contentHeight;

                        var pageData = canvas.toDataURL('image/jpeg', 1.0);

                        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                        //当内容未超过pdf一页显示的范围，无需分页
                        let PDF = new JsPDF('', 'pt', 'a4')
                        if (leftHeight < pageHeight) {
                            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                        } else {
                            while (leftHeight > 0) {
                                PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                                leftHeight -= pageHeight
                                position -= 841.89
                                if (leftHeight > 0) {
                                    PDF.addPage()
                                }
                            }
                        }
                        if(type == 2){
                            PDF.save(self.resData.courseName  + '.pdf')
                        }else{
                            var datauri = PDF.output('dataurlstring');
                            //去掉前面的字符串后，就是文件的加密字符串
                            var base64 = datauri.substring(28);
                            // 提交并归档
                            self.postPdf(base64)
                        }
                    })
                },0)
            },
            downPdf(){
                let self = this
                self.$downloadfile.download(self.pdfBlob, self.resData.pdfName);
            },
            // 提交并归档
            postPdf(base64){
                let self = this
                const loading = this.$loading({
                    lock: true,
                    text: "正在提交中...",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)"
                });
                self.inputStatus = false

                let pdfHtml;
                self.$nextTick(() => {
                    pdfHtml =  $('#pdfDom').html();
                    console.log(pdfHtml,22222);
                    let content =   '<!doctype html>'+
                                '<html>'+
                                '<head>'+
                                '<meta charset="utf-8">'+
                                '<title>批阅-实验报告</title>'+
                                '<style type="text/css">html{margin:0;padding:0;height:100%;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}html,body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,label,textarea,p,blockquote,th,td{margin:0;padding:0;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;-o-text-size-adjust:none;text-size-adjust:none;line-height:1}body,textarea{font-family:"Microsoft YaHei";font-size:100%;line-height:1;font-weight:400;color:#666;background:#ffffff;height:100%;width:100%}a{text-decoration:none;color:#333333}em,i{font-style:normal}img,button{background:transparent;border:0 none;vertical-align:middle}ul{list-style:none}table,th,td,fieldset,legend{font-weight:400;border:0 none;border-collapse:collapse}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#bbb}a,input,button{-webkit-tap-highlight-color:rgba(255,0,0,0);outline:0;-webkit-appearance:none}select{outline:0;-webkit-appearance:none}textarea{cursor:auto;outline:none;-webkit-appearance:none}body{font-size:14px;background:#ffffff;padding-right:0 !important}.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale}.el-breadcrumb{float:left;margin:18px auto 0;font-size:12px;height:18px;line-height:18px}.el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner a{color:#6a6a6a;border:solid 1px #6a6a6a;padding:3px 15px;border-radius:20px}.el-breadcrumb .el-breadcrumb__inner a{color:#6a6a6a;font-weight:normal}.el-breadcrumb .el-breadcrumb__inner a:hover{color:#1277eb}.courses-nav{width:1200px;margin:20px auto 0;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.05);box-shadow:0 0 10px rgba(0,0,0,0.05);padding:0 40px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border-radius:3px}.courses-nav .el-menu .el-menu-item{padding:0;margin-right:50px;color:#474747}.courses-nav .el-menu .el-menu-item.is-active{color:#385899;border-bottom:2px solid #385899}.courses-erji-nav .el-menu{height:60px;-webkit-box-sizing:border-box;box-sizing:border-box}.courses-erji-nav .el-menu .el-menu-item{padding:0;margin-right:48px;color:#474747}.courses-erji-nav .el-menu .el-menu-item:hover{background:transparent}.courses-erji-nav .el-menu .el-menu-item.is-active{color:#385899;border-bottom:2px solid #385899}.clear{clear:both}.clear-fix:after{display:block;content:"";clear:both}.clearfix:after{display:block;content:"";clear:both}.fl{float:left}.fr{float:right}.c-red{color:#ff4240;padding:5px 0}.c-blue{color:#385899}.c-btn-blue{color:#1277eb}.fs14{font-size:14px}.fs16{font-size:16px}.fs18{font-size:18px}.fs24{font-size:24px}.fbold{font-weight:bold}.text-right{text-align:right !important}.text-center{text-align:center !important}.text-left{text-align:left !important}a{color:#1277eb}a:hover{color:#385899}.button-style{border:1px solid #1277eb;height:32px;width:auto;text-align:center;vertical-align:middle;line-height:30px;color:#1277eb;cursor:pointer;border-radius:20px;padding:0 16px;font-size:14px;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box}.button-style:hover{background:#1277eb;color:#fff}.button-style:focus{background:#fff;border:1px solid #1277eb;color:#1277eb}.button-style:focus:hover{background:#1277eb;color:#fff}.blueStreak{background:#385899;width:2px;float:left;height:15px}.el-switch.is-checked .el-switch__core{border-color:#1ac48a;background-color:#1ac48a}.el-form-item__label{height:32px;line-height:32px}.el-input__inner{width:150px;height:32px;border-radius:4px;border:1px solid #d9d9d9}.el-form-item__content{height:32px;line-height:32px}.el-date-editor.el-input,.el-date-editor.el-input__inner{width:150px}.el-textarea__inner{border:1px solid #d9d9d9}textarea{background:#fff}.el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#1277eb;border-color:#1277eb}.el-checkbox__inner:hover{border-color:#1277eb}.el-radio__input.is-checked .el-radio__inner{border-color:#1277eb;background:#1277eb}.el-radio__inner{border-color:#1277eb}.el-radio__input.is-checked+.el-radio__label{color:#385899}.jx-title{color:#474747;font-size:16px;font-weight:normal;line-height:50px}#jx-app{height:100%}.jx-content{width:1200px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.05);box-shadow:0 0 10px rgba(0,0,0,0.05);background:#fff;border-radius:5px;padding:30px 40px;margin:0 auto 20px;color:#474747;line-height:30px;font-size:14px}.jx-container{width:1200px;margin:0 auto}.jx-index-container{position:relative}.el-table .el-button--text{color:#385899;font-size:14px}.el-table .el-button--text a{color:#385899}.el-table .el-checkbox__inner{border:1px solid #8e8e8e}.el-table th{background:#fafafa;padding:14px 0}.el-table td{padding:10px 0}.el-table th,.el-table td{text-align:center;color:#727272;font-size:14px}.el-table th.is-leaf{border-bottom:1px solid #e8e8e8}.el-pagination{position:relative;padding:30px;text-align:right}.el-pagination .el-input__inner{width:46px}.el-pagination .el-pager li.active+li{border-left:1px solid #d9d9d9}.el-pagination .el-pager li.active{color:#1277eb;border:1px solid #1277eb}.el-pagination .el-pager li,.el-pagination .btn-prev,.el-pagination .btn-next{border:1px solid #d9d9d9;font-weight:normal;color:#727272;margin-right:8px;min-width:30px;height:30px;line-height:28px;font-size:12px;padding:0 4px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;border-radius:4px}.el-pagination .el-pager li:hover,.el-pagination .btn-prev:hover,.el-pagination .btn-next:hover{color:#1277eb}.el-dialog{border-radius:5px}.el-dialog .el-dialog__header{background:#070e28;border-radius:5px 5px 0 0;height:46px;line-height:46px;padding:0 20px}.el-dialog .el-dialog__header .el-dialog__title{color:#fff;font-size:14px}.el-dialog .el-dialog__footer{padding:10px 20px 36px}.el-dialog .el-dialog__headerbtn{top:16px}.el-dialog .el-dialog__headerbtn .el-dialog__close{color:#fff}.el-dialog .el-dialog__headerbtn .el-dialog__close:hover{color:#fff}.v-note-wrapper .v-note-op{background:#ffffff !important}.v-note-help-wrapper{z-index:9999 !important}.v-note-wrapper .v-note-op.shadow,.v-note-wrapper .v-note-panel.shadow{-webkit-box-shadow:none !important;box-shadow:none !important;border:1px solid #e1e1e1 !important}.v-note-wrapper .v-note-panel.shadow{border-top:0 !important}.el-input__icon{line-height:0}.beyond-hiding{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.beyond-hiding>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.beyond-hiding img{display:none}.nodata-box{width:100%;min-height:300px;text-align:center;padding:200px 0;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.05);box-shadow:0 0 10px rgba(0,0,0,0.05);background:#fff;border-radius:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#727272}.course-chapter-nodata{width:100%;min-height:300px;text-align:center;padding:100px 0;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border-radius:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#727272}.nodata-box-small{width:100%;text-align:center;padding:50px 0;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#727272}.nodata-muban{width:100%;text-align:center;padding:50px 0;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#727272}.question-content-timu *{display:inline-block}.question-content-timu br{display:none}.markdown-body p{line-height:1.5}.markdown-body strong{line-height:1.5}body{word-break:break-all}.table-button .el-button{border:none}.table-button .el-button:focus{background:none;border:none}.table-button .el-button:hover{background:none;color:#1277eb;border:none}.table-button .btn-disabled{cursor:not-allowed;background:none;border:none;color:#c0c4cc}.table-button .btn-disabled:hover{color:#c0c4cc}.table-button .btn-disabled:focus{color:#c0c4cc}.table-button a{color:#385899}.table-button a:hover{color:#1277eb}.el-select-dropdown .el-select-dropdown__item{padding:0 30px 0 20px}.icon-wenti-m{font-size:14px !important;font-weight:normal !important}.el-textarea{position:relative;display:inline-block;width:100%;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:inherit;color:#606266;background-color:#FFF;background-image:none;border:1px solid #DCDFE6;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::-webkit-input-placeholder{color:#C0C4CC}.el-textarea__inner:-ms-input-placeholder{color:#C0C4CC}.el-textarea__inner::-ms-input-placeholder{color:#C0C4CC}.el-textarea__inner::-moz-placeholder{color:#C0C4CC}.el-textarea__inner::placeholder{color:#C0C4CC}.el-textarea__inner:hover{border-color:#C0C4CC}.el-textarea__inner:focus{outline:0;border-color:#409EFF}.el-textarea .el-input__count{color:#909399;background:#FFF;position:absolute;font-size:12px;bottom:5px;right:10px}.el-textarea.is-disabled .el-textarea__inner{background-color:#F5F7FA;border-color:#E4E7ED;color:#C0C4CC;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#C0C4CC}.el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#C0C4CC}.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#C0C4CC}.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder{color:#C0C4CC}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#C0C4CC}.el-textarea.is-exceed .el-textarea__inner{border-color:#F56C6C}.el-textarea.is-exceed .el-input__count{color:#F56C6C}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input::-webkit-scrollbar{z-index:11;width:6px}.el-button-group>.el-button.is-active,.el-button-group>.el-button.is-disabled,.el-button-group>.el-button:active,.el-button-group>.el-button:focus,.el-button-group>.el-button:hover{z-index:1}.el-input::-webkit-scrollbar:horizontal{height:6px}.el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.el-input::-webkit-scrollbar-corner{background:#fff}.el-input::-webkit-scrollbar-track{background:#fff}.el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.el-input .el-input__clear{color:#C0C4CC;font-size:14px;line-height:16px;cursor:pointer;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-input .el-input__clear:hover{color:#909399}.el-input .el-input__count{height:100%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#909399;font-size:12px}.el-input .el-input__count .el-input__count-inner{background:#FFF;display:inline-block;padding:0 5px}.el-input__inner{-webkit-appearance:none;background-color:#FFF;background-image:none;border-radius:4px;border:1px solid #DCDFE6;-webkit-box-sizing:border-box;box-sizing:border-box;color:#606266;display:inline-block;font-size:inherit;height:40px;line-height:40px;outline:0;padding:0 15px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__prefix,.el-input__suffix{position:absolute;top:0;-webkit-transition:all .3s;height:100%;color:#C0C4CC;text-align:center}.el-input__inner::-webkit-input-placeholder{color:#C0C4CC}.el-input__inner:-ms-input-placeholder{color:#C0C4CC}.el-input__inner::-ms-input-placeholder{color:#C0C4CC}.el-input__inner::-moz-placeholder{color:#C0C4CC}.el-input__inner::placeholder{color:#C0C4CC}.el-input__inner:hover{border-color:#C0C4CC}.el-input.is-active .el-input__inner,.el-input__inner:focus{border-color:#409EFF;outline:0}.el-input__suffix{right:5px;-webkit-transition:all .3s;transition:all .3s}.el-input__suffix-inner{pointer-events:all}.el-input__prefix{left:5px;-webkit-transition:all .3s;transition:all .3s}.el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__validateIcon{pointer-events:none}.el-input.is-disabled .el-input__inner{background-color:#F5F7FA;border-color:#E4E7ED;color:#C0C4CC;cursor:not-allowed}.el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__inner::-moz-placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__inner::placeholder{color:#C0C4CC}.el-input.is-disabled .el-input__icon{cursor:not-allowed}.el-input.is-exceed .el-input__inner{border-color:#F56C6C}.el-input.is-exceed .el-input__suffix .el-input__count{color:#F56C6C}.el-input--suffix .el-input__inner{padding-right:30px}.el-input--prefix .el-input__inner{padding-left:30px}.el-input--medium{font-size:14px}.el-input--medium .el-input__inner{height:36px;line-height:36px}.el-input--medium .el-input__icon{line-height:36px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:32px;line-height:32px}.el-input--small .el-input__icon{line-height:32px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:28px;line-height:28px}.el-input--mini .el-input__icon{line-height:28px}</style>'+
                                '<style type="text/css">body{background:#ffffff}#marking-practice{background:#ffffff}#marking-practice .stu-answer{color:#1277eb}#marking-practice .markdown-body{font-size:14px !important}#marking-practice img{max-width:100%}#marking-practice .underline{text-decoration:underline}#marking-practice .font16{font-size:16px;line-height:40px}#marking-practice .chose-item{text-decoration:underline;padding:0 4px}#marking-practice .question-score .el-input{width:auto}#marking-practice .question-score .el-input .el-input__inner{width:58px}#marking-practice .preview-top{position:relative;z-index:1;height:120px;margin:0px auto 0}#marking-practice .preview-top .preview-top1{width:100%;height:60px;line-height:60px;background:#101937;position:fixed;top:0;color:#fff;font-size:14px}#marking-practice .preview-top .preview-top1 .preview-top-content{width:1200px;margin:0 auto}#marking-practice .preview-top .preview-top1 .preview-top-content span{margin-right:40px}#marking-practice .preview-top .preview-top1 .preview-top-content .preview-title{font-size:18px;margin-right:0}#marking-practice .preview-top .preview-top1 .preview-top-content .preview-line{margin:0 6px}#marking-practice .preview-top .preview-top2{margin-top:0;width:100%;line-height:80px;position:fixed;top:60px;padding:0;font-size:14px}#marking-practice .preview-top .preview-top2 .preview-top-content{width:1200px;margin:0 auto;padding:0 40px}#marking-practice .preview-top .preview-top2 .preview-top-content .button-style{margin-left:20px}#marking-practice .preview-top .preview-top2 .preview-top-content .download-pdf{float:left;cursor:pointer}#marking-practice .preview-top .preview-top2 .preview-top-content2{width:1200px;margin:0 auto;line-height:30px;padding-bottom:30px}#marking-practice .preview-content{width:1200px;margin:40px auto 20px;color:#474747;padding:0 40px;overflow:hidden;-webkit-box-shadow:0 0 0 rgba(0,0,0,0);box-shadow:0 0 0 rgba(0,0,0,0)}#marking-practice .preview-content p{display:inline}#marking-practice .preview-content .tq-title{color:#474747;font-size:16px;line-height:40px}#marking-practice .preview-content dl{padding-left:20px}#marking-practice .preview-content dt,#marking-practice .preview-content dd{font-size:14px;line-height:24px}#marking-practice .preview-content dt{margin-bottom:20px}#marking-practice .preview-content dd{padding-left:20px}#marking-practice .preview-content .btn-group{text-align:center}#marking-practice .preview-content .btn-group .button-style{margin:40px 5px}#marking-practice .question-assess{height:150px;margin-top:20px;margin-bottom:45px}#marking-practice .question-assess .title{width:4%;display:inline-block;vertical-align:top;font-size:16px;color:#385899}#marking-practice .question-assess .el-textarea{width:90%;height:150px}#marking-practice .question-assess .el-textarea textarea{resize:none}.pdf-hide{display:none}</style>'+
                                '</head>'+
                                '<body>'+
                                    '<div id="jx-app">'+
                                        '<div id="marking-practice">'+
                                            '<div id="pdfDom" class="jx-content preview-content">'+pdfHtml+'</div>'+
                                        '</div>'+
                                    '</div>'+
                                '</body>'+
                                '</html>'

                    self.$http.post('/tes/course/'+self.courseId+'/check/type/2/class/'+self.classId+'/chapter/'+self.chapterId+'/student/'+localStorage.getItem("reportId"), {
                        score: self.resData.score,
                        checkResult: self.assessTextarea,
                        htmlStr: content,
                        templateId : self.radio2

                    }).then(response => {
                        let res = response.data
                        if(res.code === 200){
                            self.inputStatus = true
                            self.$message({
                                message: "提交成功",
                                type: "success"
                            })
                            self.pdfStatus = true
                            loading.close()
                        }else {
                            self.$message.error(res.message)
                            loading.close()
                            self.inputStatus = true
                        }
                    }).catch(function(err) {
                    })
                })



            },
            init() {},
            //下载修改文件名
            downloadModel(resData) {
                let that = this;
                that.$downloadfile.download(resData.reportAddress, resData.reportName);
            },

            //获取reportId
            getReportId() {
                let localStorage = window.localStorage;
                this.reportId = localStorage.getItem("reportId");
                if (this.reportId === null) {
                    //this.$router.push('/Teaching/MyCourses/studentsSubmitDetailsListTest');
                    return;
                }
                this.getPaper(this.reportId);
            },
            //选择题多选是否填写
            isChoseNull(item2, index2) {
                //是数组
                if (item2.userAnswer instanceof Array) {
                    return !item2.userAnswer.length;
                } else {
                    //不是数组
                    // return item2.userAnswer && item2.userAnswer !== "empty";
                    return true
                }
            },
            //调整相似度点击保存
            sameSubmit() {
                let that = this;
                that.dialogCheck = false;
                let dialogCheckSwitch = that.dialogCheckSwitch;
                // console.log(dialogCheckSwitch, 1);
                if (dialogCheckSwitch) {
                    that.resData.checkReportDuplicate = true;
                    that.dialogCheckSwitch = true;
                } else {
                    that.resData.checkReportDuplicate = false;
                    that.dialogCheckSwitch = false;
                }
                that.getSameList(that.resData.reportDuplicatePercent);
            },
            //获取相似度列表
            getSameList(val) {
                let that = this;
                let reqData = {
                    checkReportDuplicate: that.dialogCheckSwitch,
                    reportDuplicatePercent: val
                };
                axios.post("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/check/duplicate-percent",reqData).then(function(res) {
                    // console.log("成功");
                    // console.log(res, 110);
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            that.getPaper(that.resData.id);
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //限制input框只能输入正整数 并且不能超出指定分数
            provingCount(item, prop) {
                let that = this;
                //限制输入数字
                // console.log(item[prop], 55);
                let reg = /^[0-9]+$/;
                let isInt = reg.test(item[prop]);
                // console.log(isInt, 66);
                if (!isInt) {
                    item[prop] = "";
                    that.$message.warning("只能输入整数");
                }
                if (item[prop] > 999) {
                    item[prop] = "";
                    that.$message.warning("分数不能超过三位数");
                }
            },
            //获取试题
            getPaper(id) {
                var that = this;
                that.flag = false
                const loading = this.$loading({
                    lock: true,
                    text: "玩命加载中...",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)"
                });
                axios.get("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") +"/check/type/2/class/" + that.classId + "/chapter/" + that.chapterId +"/student/" + id).then(function(res) {
                    loading.close();
                    // console.log("成功");
                    // console.log(res, 110);
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            //滚动条置顶
                            // $("html,body").scrollTop(0);
                            that.resData = res.data.data;
                            that.pdfStatus = res.data.data.pdf === undefined ? false : true
                            that.assessTextarea = res.data.data.checkResult
                            that.pdfBlob = res.data.data.pdf
                            //赋值是否查重
                            that.dialogCheckSwitch = that.resData.checkReportDuplicate;
                            // console.log(that.resData, 666);
                            window.localStorage.setItem("reportId", id);
                            //yx模板
                            that.radio2= res.data.data.templateId

                            that.getInit()
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    loading.close();
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //提交批阅
            submitMarking() {
                var that = this;
                axios.post("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/check/type/2/class/" + that.classId +"/chapter/" + that.chapterId + "/student/" + that.resData.id,{
                    score: that.resData.score
                }).then(function(res) {
                    // console.log("成功");
                    // console.log(res);
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            that.$message({
                                message: "提交成功",
                                type: "success"
                            });
                        } else {
                            that.$message.error(res.data.message);
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            }
        }
    };
</script>
<style scoped>
.preview-score>>>.el-input__inner{
    width: 60px;
}
</style>
<style lang="scss">
    @import "../../../styles/layout/color_variables";
    body {
        background: #f8f8f8;
    }
    #marking-test {
        background: #f8f8f8;
        padding-bottom: 30px;
        img{
            max-width:100%;
        }
        .nodata-box{
            box-shadow: none;
        }
        .ex-answer {
            background: #f6f6f6;
            padding: 18px;
            margin: 18px 0;
            // color: #727272;
        }

        .dialog-check {
            .dialog-check-value {
                width: 80px;
                input {
                    width: 80px;
                }
            }
            p {
                line-height: 60px;
                text-align: center;
            }
            .check-tishi{
                i {
                    padding: 0 10px;
                    font-size: 20px;
                    color: $btn-blue;
                }
            }
            .dialog-b {
                margin-left: -27px;
            }
            .el-dialog__footer {
                text-align: center;
            }
            .el-select .el-input__inner {
                width: 80px;
            }
        }
        .marking-test-title {
            font-size: 16px;
            font-weight: bold;
            border-bottom: 1px solid #e8e8e8;
            line-height: 60px;
            margin-bottom: 14px;
        }
        .c-gray {
            color: #727272;
        }
        .same-content-hidden {
            height: 165px;
            overflow: hidden;
        }
        .same-content {
            border: 1px solid #cacaca;
            width: 800px;
            box-sizing: border-box;
            padding: 30px 22px;
            margin-top: 40px;
            position: relative;
            li {
                display: flex;
                padding: 10px 0;
                justify-content: space-between;
                .progress {
                    width: 270px;
                    .el-progress-bar {
                        width: 218px;
                        padding-right: 10px;
                        margin-right: 0;
                    }
                    .el-progress__text {
                        margin-left: 0;
                    }
                }
            }
            .show-same-content {
                position: absolute;
                width: 100%;
                height: 40px;
                text-align: center;
                background: #fff;
                left: 0;
                bottom: 0;
                cursor: pointer;
                // &:after {
                //     font-family: "element-icons" !important;
                //     content: "\e603";
                // }
            }
            .same-content-hidden-icon {
                // &:after {
                //     font-family: "element-icons" !important;
                //     content: "\e605";
                // }
            }
        }
        .underline {
            text-decoration: underline;
        }
        .font16 {
            font-size: 16px;
            line-height: 40px;
        }
        //选择题答案下划线
        .chose-item {
            text-decoration: underline;
            padding: 0 4px;
        }
        .question-score {
            .el-input {
                width: auto;
                .el-input__inner {
                    width: 50px;
                }
            }
        }
        .preview-top {
            position: relative;
            z-index: 2;
            height: 120px;
            margin: 0px auto 0;
            .preview-top1 {
                width: 100%;
                height: 60px;
                line-height: 60px;
                background: #101937;
                position: fixed;
                top: 0;
                color: #fff;
                font-size: 14px;
                .preview-top-content {
                    width: 1200px;
                    margin: 0 auto;
                    span {
                        margin-right: 40px;
                    }
                    .preview-title {
                        font-size: 18px;
                        margin-right: 0;
                    }
                    .preview-line {
                        margin: 0 6px;
                    }
                }
            }
            .preview-top2 {
                margin-top: 0;
                width: 100%;
                line-height: 80px;
                position: fixed;
                top: 60px;
                padding: 0;
                font-size: 14px;
                .preview-top-content {
                    width: 1200px;
                    margin: 0 auto;
                    padding: 0 40px;
                    .button-style {
                        margin-left: 20px;
                    }
                    .preview-score {
                        width: 80px;
                        input {
                            width: 80px;
                        }
                    }
                    .download-pdf{
                        float: left;
                        cursor: pointer;
                    }
                }
                .preview-top-content2 {
                    width: 1200px;
                    margin: 0 auto;
                    line-height: 30px;
                    padding-bottom: 30px;
                }
            }
        }
        .preview-content {
            width: 1200px;
            margin: 40px auto 20px;
            color: $title-gray;
            // box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 0 rgba(0, 0, 0, 0);
            &.jx-content{
                box-shadow: 0 0 0 rgba(0, 0, 0, 0);
            }
            p {
                display: inline;
            }
            .tq-title {
                color: $title-gray;
                font-size: 16px;
                line-height: 40px;
            }
            dl {
                padding-left: 20px;
            }
            dt,dd {
                font-size: 14px;
                line-height: 30px;
            }
            dd {
                padding-left: 20px;
            }
            .btn-group {
                text-align: center;
                .button-style {
                    margin: 40px 5px;
                }
            }
        }
        .question-assess{
            // overflow: hidden;
            height: 150px;
            margin-top: 20px;
            margin-bottom: 25px;
            .title{
                // float: left;
                //width: 4%;
                display: inline-block;
                vertical-align: top;
                font-size: 16px;
                color: #385899;
                font-weight: bold;
                 height: 50px;
            }
            .question-assess-right{
                // position: absolute;
                // right: 10px;
                // top: -17px;
                 text-align: right;
                margin-top: -50px;
                margin-bottom: 15px;

            }
            .spans{
                cursor: pointer;
                color: #385899;
            }

            .el-textarea{
                // float: left;
                width: 100%;
                height: 150px;
                textarea{
                    resize:none;
                }
            }
        }
    }
</style>
